/**
* 功能描述: 过滤和升降序demo
* @author 崔孝楠
* @date 2022/10/8 15:55
* @version 1.0
*/
<template>
  <span>过滤和升序降序</span>
  <div class="yw-table">
    <div class="yw-table-container">
      <div class="yw-table-content">
        <table style="table-layout: auto;">
          <!-- 设置列的width -->
          <colgroup>
            <col style="width: 20%;">
            <col style="width: 20%;">
          </colgroup>
          <!-- 表头 -->
          <thead class="yw-table-thead">
            <tr>
              <!-- 排序 -->
              <th class="yw-table-cell" colstart="0" colend="0">
                <div class="yw-table-column-sort">
                  <span>Name</span>
                  <span class="yw-table-column-sorter-inner">
                    <svg focusable="false" class="yw-table-column-sorter-icon yw-table-column-sorter-up" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024">
                      <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path>
                    </svg>
                    <svg focusable="false" class="yw-table-column-sorter-icon yw-table-column-sorter-down" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024">
                      <path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
                    </svg>
                  </span>
                </div>
              </th>
              <!-- 过滤列 -->
              <th class="yw-table-cell" colstart="1" colend="1">
                <div class="yw-table-filter-column">
                  <span>Gender</span>
                  <!-- 过滤图标 -->
                  <span class="yw-table-filter-trigger" @click="showDrop()">
                    <svg focusable="false" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
                      <path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path>
                    </svg>
                  </span>
                  <!-- 过滤选项下拉框 -->
                  <div class="yw-table-filter-dropdown">
                    <ul class="yw-dropdown-menu" id="yw-dropdown-menu" role="menu" data-menu-list="true">
                      <li class="yw-dropdown-menu-item" role="menuitem" tabindex="-1" aria-disabled="false">
                        <label class="yw-checkbox-wrapper">
                          <span class="yw-checkbox">
                            <input type="checkbox" class="yw-checkbox-input">
                            <span class="yw-checkbox-inner"></span>
                          </span>
                          <span>Male</span>
                        </label>
                      </li>
                      <li class="yw-dropdown-menu-item" role="menuitem" tabindex="-1" aria-disabled="false">
                        <label class="yw-checkbox-wrapper">
                          <span class="yw-checkbox">
                            <input type="checkbox" class="yw-checkbox-input">
                            <span class="yw-checkbox-inner"></span>
                          </span>
                          <span>FeMale</span>
                        </label>
                      </li>
                      <!-- 操作按钮 -->
                      <div class="yw-table-filter-dropdown-btns">
                        <button class="yw-btn yw-btn-small" @click="hideDrop()">重置</button>
                        <button class="yw-btn yw-btn-small" @click="hideDrop()">确定</button>
                      </div>
                    </ul>
                  </div>
                </div>
              </th>
              <th class="yw-table-cell" colstart="2" colend="2">
                Email
              </th>
            </tr>
          </thead>
          <tbody class="yw-table-tbody">
            <tr data-row-key="1" class="yw-table-row">
              <td class="yw-table-cell">
                <a>John Brown</a>
              </td>
              <td class="yw-table-cell">
                Male
              </td>
              <td class="yw-table-cell">
                amber@123
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tableWithFilterAndSorter",
  methods: {
    showDrop() {
      let dropdownDom = document.getElementById('yw-dropdown-menu')
      dropdownDom.style.display = 'block'
    },
    hideDrop() {
      let dropdownDom = document.getElementById('yw-dropdown-menu')
      dropdownDom.style.display = 'none'
    }
  }
}
</script>

<style scoped>

</style>
